<template>
  <TableView
    ref="tableView"
    :table-attrs="{
      api: fetchList,
      descs: ['create_time'],
      dicOptions: [
        { prop: 'status', dicType: 'edifice_usage_status' },
        { prop: 'buildingStructure', dicType: 'edifice_building_structure' },
        { prop: 'seismicGrade', dicType: 'edifice_earthquake_resistance_level' },
        { prop: 'sourceAssets', dicType: 'edifice_scurce_assets' }
      ]
    }"
    form-path="/space/fyroomedifice/edificeForm/{id:-1}"
    :search-model="searchForm"
    :delete-api="batchDelete"
    :tree-listeners="{ 'node-click': onNodeClick }"
    :tree-attrs="{
      fetchApi: regionalFetchTree,
      show: true,
      treeProps: { label: 'name' },
      lazy: false,
      'expand-first-node': true,
      customRootNode: { name: '全部', id: -1 }
    }"
    :toolbar-attrs="{
      buttons: ['slot', { del: permissions.edifice_fyroomedifice_del, create: permissions.edifice_fyroomedifice_add }]
    }">
    <template #toolbar-button>
      <ToolbarButton
        v-if="permissions.edifice_fyroomedifice_export"
        type="primary"
        icon="el-icon-download"
        label="导出"
        @click="exportExcel()" />
      <ToolbarButton
        v-if="permissions.edifice_fyroomedifice_export"
        type="primary"
        icon="el-icon-upload"
        label="导入"
        @click="$refs.excelUpload.show()" />
    </template>
    <template #columns>
      <TableColumn label="使用状况" prop="status" />
      <TableColumn label="所属区域" clickable prop="regionalMc" />
      <TableColumn label="楼栋名称" clickable prop="name" width="120" />
      <TableColumn label="楼栋编号" clickable prop="code" width="120" />
      <TableColumn label="楼栋座落" prop="location" />
      <TableColumn label="资产编码" prop="assetNumber" />
      <TableColumn label="取得方式" prop="floorage" />
      <TableColumn label="取得日期" prop="builddate" width="95" />
      <TableColumn label="使用年限" prop="usefulLife" />
      <TableColumn label="实际用途" prop="practicalUse" />
      <TableColumn label="批准用途" prop="permittedUse" />
      <TableColumn label="权属证号" prop="ownershipNumber" />
      <TableColumn label="权属证明" prop="ownershipProve" />
      <TableColumn label="权属性质" prop="ownershipType" />
      <TableColumn label="发证时间" prop="issuingDate" width="95" />
      <TableColumn label="资金来源" prop="sourcesFunds" />
      <TableColumn label="计量单位" prop="measureUnit" />
      <TableColumn label="竣工日期" prop="completionDate" width="95" />
      <TableColumn label="建筑结构" prop="buildingStructure" />
      <TableColumn label="搞震级别" prop="seismicGrade" />
      <TableColumn label="地上层数" prop="upFloor" />
      <TableColumn label="地下层数" prop="downFloor" />
      <TableColumn label="地上面积" prop="upArea" />
      <TableColumn label="地下面积" prop="downArea" />
      <TableColumn label="总层数" prop="floorcount" />
      <TableColumn label="占地面积" prop="coveredArea" />
      <TableColumn label="建筑面积" prop="floorage" />
      <TableColumn label="资产来源" prop="sourceAssets" />
      <TableColumn label="投入使用日期" prop="useDate" width="95" />
      <TableColumn label="经度" prop="x" />
      <TableColumn label="纬度" prop="y" />
      <TableColumn label="备注" prop="remarks" />
    </template>
    <template #search-form>
      <FormInput v-model="searchForm.regionalMc" label="区域名称" prop="regionalMc" />
      <FormInput v-model="searchForm.name" label="楼栋名称" prop="name" />
      <FormInput v-model="searchForm.code" label="楼栋编号" prop="code" />
      <FormInput v-model="searchForm.location" label="楼栋座落" prop="location" />
      <FormInput v-model="searchForm.practicalUse" label="实际用途" prop="practicalUse" />
      <FormInput v-model="searchForm.ownershipNumber" label="权属证号" prop="ownershipNumber" />
      <FormInput v-model="searchForm.floorage" label="取得方式" prop="floorage" />
    </template>
    <!--excel 模板导入 -->
    <ExcelUpload
      ref="excelUpload"
      title="楼栋信息导入"
      :url="`${spaceService}fyroomedifice/import`"
      :temp-url="`${spaceService}fyroomedifice/local/fyroomedificeTemp.xlsx`"
      temp-name="楼栋导入模板.xlsx"
      @refreshDataList="refreshChange" />
  </TableView>
</template>

<script>
  import { mapState } from 'vuex'
  import { services } from '@/config'
  import { fetchList, batchDelete } from '@/api/space/fyroomedifice'
  import { regionalFetchTree } from '@/api/space/fyroomregional'

  export default {
    name: 'EdificeView',

    data() {
      return {
        searchForm: {
          regionalMc: '',
          name: '',
          code: '',
          location: '',
          practicalUse: '',
          ownershipNumber: '',
          floorage: '',
          regionalId: null
        },
        spaceService: services.spaceService
      }
    },
    computed: {
      ...mapState('user', ['permissions'])
    },
    methods: {
      batchDelete,
      regionalFetchTree,
      fetchList,
      refreshChange() {
        this.$refs.tableView.onSearchClick()
      },
      onNodeClick(node) {
        this.searchForm.regionalId = node.id === -1 ? null : node.id
        this.$refs.tableView.onSearchClick()
      },
      //  导出excel
      exportExcel() {
        this.$downBlobFile(
          `${services.spaceService}fyroomedifice/export`,
          this.searchForm,
          `楼栋管理${this.$dateFormat(new Date())}.xlsx`
        )
      }
    }
  }
</script>
